<template>
    <div>
        <Form :label-width="100" ref="formInline" :model="formInline" :rules="ruleCustom">
            <Row :gutter="16" class="query-form" >
                <i-col span="8">
                    <FormItem label="当前机构：" prop="companyName">
                        <Input v-model="formInline.companyName" readonly/>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <FormItem label="当前坐标：" prop="coordinate">
                        <Input v-model="formInline.coordinate" placeholder="请选择坐标"/>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <div style="float: right;">
                        <Button class="ivu-btn-reset" @click="cancel">重置</Button>
                        <Button class="ivu-btn-query" @click="save" :loading="buttonLoading">保存</Button>
                    </div>
                </i-col>
            </Row>
        </Form>
        <Divider style="margin: 0 10px"/>
        <Row>
            <i-col span="24">
                <iframe ref="container" id="show-iframe" frameborder=0 name="showHere" scrolling=auto src="https://api.map.baidu.com/lbsapi/getpoint/index.html" :style="{height: iframeHight + 'px', width:'100%'}"></iframe>
            </i-col>
        </Row>
    </div>
</template>

<script>

    import {Api} from '../../../api'
    import {sessionStorage} from '@/common/cacheUtils.js';

    export default {
        name: "orgPoint",
        data(){
            return {
                formInline: {},
                ruleCustom: {
                    coordinate: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                },
                iframeHight: '',
                buttonLoading: false
            }
        },
        mounted(){
            this.iframeHight = window.innerHeight - 170;
            let user = sessionStorage('userId').getObject('userId');
            this.formInline.companyName = user.companyName;
            this.formInline.orgId = user.companyId;
        },
        methods: {
            save(){
                this.$refs['formInline'].validate((valid) => {
                    if(valid) {
                        this.buttonLoading = true;
                        let arr = this.formInline.coordinate.split(",");
                        this.formInline.xCoordinate = arr[0];
                        this.formInline.yCoordinate = arr[1];
                        this.$http.put(Api.queryMapMarkerByOrgId + '/orgPoint', this.formInline).then(function(response){
                            if(response.data.status == 200){
                                this.$Message.success({ content: '保存成功', duration: 4 });
                                this.buttonLoading = false;
                            }else{
                                this.buttonLoading = false;
                                this.$Message.error({ content: '保存失败', duration: 4 });
                            }
                        });
                    }
                });
            },
            cancel(){
                this.formInline.coordinate = '';
            }
        }
    }
</script>

<style scoped>

</style>
